import React, { useEffect, useMemo, useState } from 'react'
import './z_cate.css'
import instance from '../http/instance'
import '../rem'
import moment from 'moment';
import { DotLoading, Popup } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
export default function Z_cate() {
    const [zzjiacu, setzzjiacu] = useState(1)
    const [zzpinglun, setzzpinglun] = useState([])
    const [zzxid, setzzxid] = useState('')
    const [zzshujulist, setzzshujulist] = useState([])
    const [zzliwulist, setzzliwulist] = useState([])
    const [zzloading, setzzloading] = useState(false)
    const [visible5, setVisible5] = useState(false)
    const [liwuindex, setliwuindex] = useState(-1)
    const [zzzhifujine, setzzzhifujine] = useState(0)
    const [zzmiaoshu, setzzmiaoshu] = useState('')
    const [zzplname, setzzplname] = useState('')
    const [visible1, setVisible1] = useState(false)
    const [page, setpage] = useState(1)
    const [plid, setplid] = useState('')
    const navigate = useNavigate()
    const pagesize = 3
    const pagelist = zzshujulist.slice(0, page * pagesize)
    const getliwu = async () => {
        const data = await instance.get('http://127.0.0.1:8000/liwu')
        if (data.data.code === 200) {
            setzzliwulist(data.data.data)
        }
    }
    const getpinglun = async () => {
        const data = await instance.get(`http://127.0.0.1:8000/catepl?id=${plid}`)
        if (data.data.code === 200) {
            setzzpinglun(data.data.data.reverse())
        }
    }
    const getshujulist = async () => {
        const data = await instance.get('http://127.0.0.1:8000/zzshequ')
        if (data.data.code === 200) {
            setzzshujulist(data.data.data)
        }
    }
    const zzchudi = (e) => {
        const scrollTop = e.target.scrollTop
        const clientHeight = e.target.clientHeight
        const scrollHeight = e.target.scrollHeight
        if (scrollTop + clientHeight + 1 > scrollHeight) {
            setzzloading(true)
            setTimeout(() => {
                let copypage = page
                copypage += 1
                setpage(copypage)
                setzzloading(false)
            }, 1000)
        }
    }
    const zan = async (item) => {
        const data = await instance.put(`http://127.0.0.1:8000/dianzan?id=${item._id}`)
        if (data.data.code === 200) {
            getshujulist()
        }
    }
    const qxzan = async (item) => {
        const data = await instance.put(`http://127.0.0.1:8000/qxdianzan?id=${item._id}`)
        if (data.data.code === 200) {
            getshujulist()
        }
    }
    const addpl = async (item) => {
        const data = await instance.post('http://127.0.0.1:8000/zzpinglun', { p_id: item._id, title: zzplname, touxiang: './nv6.webp', time: new Date, name: '我是土豆' })
        if (data.data.code === 200) {
            getpinglun()
            setzzplname('')
        }

    }
    const zzlijizhifu = async () => {
        const data = await instance.post('http://127.0.0.1:8000/pcpay', { jine: zzzhifujine, miaoshu: zzmiaoshu })
        if (data.data.code === 200) {
            window.location.href = data.data.result
        }
    }
    const zzpllength = useMemo(() => {
        return zzpinglun.filter(item => item.p_id === plid).length
    })
    const zzxuanzeliwu = (item, index) => {
        setzzzhifujine(item.price)
        setzzmiaoshu(item.name)
        setliwuindex(index)
    }
    const tiaozhuan = (item) => {
        navigate(`/xiang?id=${item._id}`)
    }
    useEffect(() => {
        getshujulist()
        getpinglun()
        getliwu()
    }, [plid])
    return (
        <div className='zzzuida' onScroll={zzchudi}>
            <div className='zzcatetop'>
                <ul>
                    <li style={{ marginTop: '0.1rem' }}><svg t="1732870200691" className="icon" onClick={() => {
                        navigate('/sou')
                    }}
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2372" width="16" height="16"><path d="M469.333333 874.666667C245.333333 874.666667 64 693.333333 64 469.333333S245.333333 64 469.333333 64s405.333333 181.333333 405.333334 405.333333-181.333333 405.333333-405.333334 405.333334z m0-725.333334C292.266667 149.333333 149.333333 292.266667 149.333333 469.333333s142.933333 320 320 320 320-142.933333 320-320S646.4 149.333333 469.333333 149.333333z" fill="#333333" p-id="2373"></path><path d="M311.466667 403.2c-8.533333 0-17.066667-2.133333-23.466667-8.533333-19.2-12.8-23.466667-40.533333-10.666667-59.733334 42.666667-61.866667 115.2-100.266667 192-100.266666 57.6 0 115.2 21.333333 157.866667 61.866666 17.066667 14.933333 19.2 42.666667 2.133333 59.733334-14.933333 17.066667-42.666667 19.2-59.733333 2.133333-27.733333-25.6-64-38.4-100.266667-38.4-49.066667 0-93.866667 23.466667-121.6 64-8.533333 12.8-23.466667 19.2-36.266666 19.2z" fill="#333333" p-id="2374"></path><path d="M902.4 955.733333c-10.666667 0-21.333333-4.266667-29.866667-12.8l-181.333333-181.333333c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l181.333334 181.333333c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8z" fill="#333333" p-id="2375"></path></svg></li>
                    <li onClick={() => {
                        setzzjiacu(1)

                    }} style={{ textAlign: 'center', width: 60, fontSize: 20, marginLeft: 100 }} className={zzjiacu === 1 ? 'bg' : ''}>社区</li>
                    <li style={{ textAlign: 'center', width: 60, fontSize: 20 }} onClick={() => {
                        setzzjiacu(2)

                    }} className={zzjiacu === 2 ? 'bg' : ''}>好友</li>
                    <li style={{ marginTop: '0.1rem', marginLeft: 115 }}><svg t="1732870323682" className="icon" onClick={() => {
                        navigate('/add')
                    }}
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11125" id="mx_n_1732870323682" width="16" height="16"><path d="M512 288c-124.8 0-224 99.2-224 224s99.2 224 224 224 224-99.2 224-224-99.2-224-224-224z m0 400c-96 0-176-80-176-176s80-176 176-176 176 80 176 176-80 176-176 176zM768 371.2a1.6 1.6 0 1 0 102.4 0 1.6 1.6 0 1 0-102.4 0z" fill="" p-id="11126"></path><path d="M864 224h-96l-22.4-67.2c-6.4-16-25.6-28.8-41.6-28.8H320c-19.2 0-35.2 12.8-41.6 28.8L256 224h-96c-54.4 0-96 41.6-96 96v448c0 54.4 44.8 96 96 96h704c54.4 0 96-41.6 96-96V320c0-54.4-41.6-96-96-96z m48 544c0 25.6-22.4 48-48 48H160c-25.6 0-48-22.4-48-48V320c0-25.6 22.4-48 48-48h131.2l9.6-32 22.4-64h377.6l22.4 64 9.6 32H864c25.6 0 48 22.4 48 48v448z" fill="" p-id="11127"></path></svg></li>
                </ul>
            </div>
            <div className='zzshequshuju' style={{ display: zzjiacu === 1 ? 'block' : 'none' }}>
                {
                    pagelist.map(item => {
                        return <div key={item._id} className='zzshuju'>
                            <div className='zzshujutop'>
                                <img onClick={() => {
                                    tiaozhuan(item)
                                }} style={{ marginLeft: 10, marginTop: 3, width: 50, height: 50, borderRadius: '50%' }} src={item.touxiang} alt="" />
                                <p style={{ marginTop: 5, marginLeft: 10, fontSize: 15 }}>
                                    <span>{item.name}</span><br />
                                    <span>{moment(item.time).format('YYYY/MM/DD HH:mm')}</span>
                                    <span style={{ marginLeft: '3.3rem', fontSize: 20 }}>...</span>
                                </p>
                            </div>
                            <p style={{ fontSize: 17, marginLeft: 10, marginTop: 5 }}>{item.title}</p>
                            <div className='shujutupian'>
                                <img style={{ marginLeft: 10, width: 180, height: 250, marginTop: 15 }} src={item.img_url} alt="" /><br />
                                {
                                    item.cate.map((it, index) => {
                                        return <p key={index} style={{ marginTop: '0.15rem', marginLeft: '0.2rem', fontSize: 13 }}>
                                            <span>{it.name}</span>&nbsp;&nbsp;
                                            <span>{it.name1}</span>
                                        </p>
                                    })
                                }
                                <p style={{ marginTop: '0.1rem', height: '30px', marginLeft: 10 }}>
                                    <svg style={{ display: item.dianzan ? 'none' : 'inline-block' }} onClick={() => {
                                        zan(item)
                                    }} t="1732880019514" className="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14150" width="16" height="16"><path d="M170.666667 938.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-341.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h85.333333l128-341.333334h42.666667a170.666667 170.666667 0 0 1 170.666666 170.666667v170.666667h232.021334a85.333333 85.333333 0 0 1 82.773333 106.026666l-69.12 276.693334A170.666667 170.666667 0 0 1 677.376 938.666667H170.666667z m85.333333-426.666667H170.666667v341.333333h85.333333v-341.333333z m187.136-341.333333L341.333333 442.154667V853.333333h336.085334a85.333333 85.333333 0 0 0 82.773333-64.64L829.354667 512H512V239.530667c0-35.925333-27.52-65.408-62.592-68.565334L443.136 170.666667z" fill="#000000" p-id="14151"></path></svg>
                                    <svg style={{ display: item.dianzan ? 'inline-block' : 'none' }} onClick={() => {
                                        qxzan(item)
                                    }} t="1732882778631" className="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17838" width="16" height="16"><path d="M170.666667 938.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-341.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h85.333333l128-341.333334h42.666667a170.666667 170.666667 0 0 1 170.666666 170.666667v170.666667h232.021334a85.333333 85.333333 0 0 1 82.773333 106.026666l-69.12 276.693334A170.666667 170.666667 0 0 1 677.376 938.666667H170.666667z m85.333333-426.666667H170.666667v341.333333h85.333333v-341.333333z m187.136-341.333333L341.333333 442.154667V853.333333h336.085334a85.333333 85.333333 0 0 0 82.773333-64.64L829.354667 512H512V239.530667c0-35.925333-27.52-65.408-62.592-68.565334L443.136 170.666667z" fill="#d81e06" p-id="17839"></path></svg>
                                    <span style={{ marginLeft: '5.5rem' }}>
                                        <svg onClick={() => { setVisible1(true) }} t="1732935468964" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3226" width="16" height="16"><path d="M924.649248 822.509986 924.649248 516.181229c21.098527-12.180414 35.259038-34.95614 35.259038-61.081147L959.908286 377.019773c0-38.885636-31.564903-70.502727-70.50989-70.502727l-92.732008 0c2.031263-1.215688 4.050246-2.440585 6.051833-3.677762 42.710754-26.396183 71.222111-52.741201 79.844489-81.858356 8.915044-30.106692-5.238304-57.455573-38.946011-76.966952-38.893822-22.51376-86.874603-25.088398-141.296073-12.032034-38.808888 9.31004-79.630618 26.253944-121.081683 48.621371-22.441105 12.109806-43.670615 25.061792-63.065338 38.024012-4.710278 3.14769-9.074679 6.139837-13.083993 8.951883-6.860245-6.130627-13.867846-12.18553-21.047362-18.104333-60.102866-49.556673-120.3009-82.089623-178.51065-89.178065-47.313585-5.762237-91.119277 5.932106-128.96421 37.111223l-2.709715 2.62478c-1.222851 1.39272-2.399653 2.796696-3.529383 4.211928-38.202067 47.88766-20.659529 97.891518 27.161616 142.272307l-60.288085 0c-39.051411 0-70.50989 31.546483-70.50989 70.502727l0 78.08031c0 26.058492 14.186094 48.836265 35.259038 61.038168l0 306.371736c0 51.970652 42.047652 93.820805 94.055143 93.820805l634.591059 0C882.690624 916.329768 924.649248 874.39161 924.649248 822.509986zM603.601254 221.866087c38.149878-20.586874 75.376735-36.037774 109.707634-44.274366 43.72792-10.489912 79.850629-8.55177 106.71651 6.999414 16.350386 9.464559 19.618826 15.780405 17.451464 23.098068-4.270257 14.421454-26.194592 34.679847-59.513442 55.271838-14.854313 9.18008-30.887474 17.828041-46.931892 25.63996-9.611915 4.679579-17.024745 8.011464-21.10876 9.732665-4.241604 1.787716-7.677866 4.674463-10.128685 8.185426L578.456574 306.519092c-0.849344-3.066849-2.323928-6.012947-4.477988-8.629541-1.252527-1.521656-3.5345-4.210905-6.777357-7.900947-5.322216-6.055926-11.461029-12.780071-18.346857-20.006659-2.964518-3.110851-5.992481-6.218632-9.052167-9.324366 1.469468-0.998747 2.978844-2.015913 4.5312-3.053546C562.564629 245.418502 582.550823 233.224786 603.601254 221.866087zM273.063119 304.335357c-2.225691-1.238201-6.499018-3.817955-12.116969-7.561209-9.450233-6.296403-18.900465-13.420661-27.631314-21.152762-35.000142-30.993898-45.433772-58.057277-26.204825-82.161255 0.300852-0.3776 0.636496-0.75827 0.953721-1.136893 27.187199-21.762653 57.552787-29.628808 91.77317-25.461905 47.482431 5.782703 100.449783 34.407648 154.260339 78.775134 21.828145 17.997909 42.267663 37.33635 60.690244 56.668651 1.362021 1.428535 2.683109 2.830465 3.979638 4.212952L276.309046 306.518069C275.30416 305.715797 274.223548 304.982086 273.063119 304.335357zM113.702622 377.019773c0-13.100366 10.464329-23.593348 23.499204-23.593348l752.196571 0c12.941753 0 23.499204 10.574846 23.499204 23.593348l0 78.08031c0 6.303566-2.427282 11.999288-6.393617 16.217357-1.722224-0.401136-3.514033-0.620124-5.359055-0.620124L125.455293 470.697315c-1.825578 0-3.599991 0.214894-5.306866 0.607844-3.988848-4.229325-6.445806-9.931187-6.445806-16.205077L113.702622 377.019773zM196.004069 869.421412c-26.069749 0-47.043433-20.874423-47.043433-46.911426L148.960637 525.602809l728.676901 0 0 296.907177c0 25.993001-20.928658 46.911426-47.043433 46.911426L196.004069 869.421412z" fill="#020202" p-id="3227"></path></svg>
                                    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span>
                                        <svg onClick={() => {
                                            setVisible5(true)
                                            setplid(item._id)
                                        }} t="1732880280553" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16723" width="16" height="16"><path d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#3D3D3D" p-id="16724"></path></svg>
                                    </span>
                                </p>
                                <p style={{ marginLeft: '0.3rem' }}>
                                    <input value={zzplname} onKeyDown={(e) => {
                                        if (e.keyCode === 13) {
                                            addpl(item)
                                        }
                                    }} onChange={(e) => {
                                        setzzplname(e.target.value)
                                    }} type="text" style={{ border: '0px', backgroundColor: 'aliceblue', width: '95%', height: '0.7rem', borderRadius: '18px 18px' }} placeholder='来都来了,说点什么呗~' />
                                </p>
                            </div>
                        </div>
                    })
                }
            </div>
            <div className='zzshequshuju' style={{ display: zzjiacu === 2 ? 'block' : 'none' }}>
                {
                    pagelist.filter(it => it.status).map(item => {
                        return <div key={item._id} className='zzshuju'>
                            <div className='zzshujutop'>
                                <img style={{ marginLeft: 10, marginTop: 3, width: 50, height: 50, borderRadius: '50%' }} src={item.touxiang} alt="" />
                                <p style={{ marginTop: 5, marginLeft: 10, fontSize: 15 }}>
                                    <span>{item.name}</span><br />
                                    <span>{moment(item.time).format('YYYY/MM/DD HH:mm')}</span>
                                    <span style={{ marginLeft: '3.3rem', fontSize: 20 }}>...</span>
                                </p>
                            </div>
                            <p style={{ fontSize: 17, marginLeft: 10, marginTop: 5 }}>{item.title}</p>
                            <div className='shujutupian'>
                                <img style={{ marginLeft: 10, width: 180, height: 250, marginTop: 15 }} src={item.img_url} alt="" /><br />
                                {
                                    item.cate.map((it, index) => {
                                        return <p key={index} style={{ marginTop: '0.15rem', marginLeft: '0.2rem', fontSize: 13 }}>
                                            <span>{it.name}</span>&nbsp;&nbsp;
                                            <span>{it.name1}</span>
                                        </p>
                                    })
                                }
                                <p style={{ marginTop: '0.1rem', height: '30px', marginLeft: 10 }}>
                                    <svg style={{ display: item.dianzan ? 'none' : 'inline-block' }} onClick={() => {
                                        zan(item)
                                    }} t="1732880019514" className="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14150" width="16" height="16"><path d="M170.666667 938.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-341.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h85.333333l128-341.333334h42.666667a170.666667 170.666667 0 0 1 170.666666 170.666667v170.666667h232.021334a85.333333 85.333333 0 0 1 82.773333 106.026666l-69.12 276.693334A170.666667 170.666667 0 0 1 677.376 938.666667H170.666667z m85.333333-426.666667H170.666667v341.333333h85.333333v-341.333333z m187.136-341.333333L341.333333 442.154667V853.333333h336.085334a85.333333 85.333333 0 0 0 82.773333-64.64L829.354667 512H512V239.530667c0-35.925333-27.52-65.408-62.592-68.565334L443.136 170.666667z" fill="#000000" p-id="14151"></path></svg>
                                    <svg style={{ display: item.dianzan ? 'inline-block' : 'none' }} onClick={() => {
                                        qxzan(item)
                                    }} t="1732882778631" className="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17838" width="16" height="16"><path d="M170.666667 938.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-341.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h85.333333l128-341.333334h42.666667a170.666667 170.666667 0 0 1 170.666666 170.666667v170.666667h232.021334a85.333333 85.333333 0 0 1 82.773333 106.026666l-69.12 276.693334A170.666667 170.666667 0 0 1 677.376 938.666667H170.666667z m85.333333-426.666667H170.666667v341.333333h85.333333v-341.333333z m187.136-341.333333L341.333333 442.154667V853.333333h336.085334a85.333333 85.333333 0 0 0 82.773333-64.64L829.354667 512H512V239.530667c0-35.925333-27.52-65.408-62.592-68.565334L443.136 170.666667z" fill="#d81e06" p-id="17839"></path></svg>
                                    <span style={{ marginLeft: '5.5rem' }}>
                                        <svg onClick={() => { setVisible1(true) }} t="1732935468964" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3226" width="16" height="16"><path d="M924.649248 822.509986 924.649248 516.181229c21.098527-12.180414 35.259038-34.95614 35.259038-61.081147L959.908286 377.019773c0-38.885636-31.564903-70.502727-70.50989-70.502727l-92.732008 0c2.031263-1.215688 4.050246-2.440585 6.051833-3.677762 42.710754-26.396183 71.222111-52.741201 79.844489-81.858356 8.915044-30.106692-5.238304-57.455573-38.946011-76.966952-38.893822-22.51376-86.874603-25.088398-141.296073-12.032034-38.808888 9.31004-79.630618 26.253944-121.081683 48.621371-22.441105 12.109806-43.670615 25.061792-63.065338 38.024012-4.710278 3.14769-9.074679 6.139837-13.083993 8.951883-6.860245-6.130627-13.867846-12.18553-21.047362-18.104333-60.102866-49.556673-120.3009-82.089623-178.51065-89.178065-47.313585-5.762237-91.119277 5.932106-128.96421 37.111223l-2.709715 2.62478c-1.222851 1.39272-2.399653 2.796696-3.529383 4.211928-38.202067 47.88766-20.659529 97.891518 27.161616 142.272307l-60.288085 0c-39.051411 0-70.50989 31.546483-70.50989 70.502727l0 78.08031c0 26.058492 14.186094 48.836265 35.259038 61.038168l0 306.371736c0 51.970652 42.047652 93.820805 94.055143 93.820805l634.591059 0C882.690624 916.329768 924.649248 874.39161 924.649248 822.509986zM603.601254 221.866087c38.149878-20.586874 75.376735-36.037774 109.707634-44.274366 43.72792-10.489912 79.850629-8.55177 106.71651 6.999414 16.350386 9.464559 19.618826 15.780405 17.451464 23.098068-4.270257 14.421454-26.194592 34.679847-59.513442 55.271838-14.854313 9.18008-30.887474 17.828041-46.931892 25.63996-9.611915 4.679579-17.024745 8.011464-21.10876 9.732665-4.241604 1.787716-7.677866 4.674463-10.128685 8.185426L578.456574 306.519092c-0.849344-3.066849-2.323928-6.012947-4.477988-8.629541-1.252527-1.521656-3.5345-4.210905-6.777357-7.900947-5.322216-6.055926-11.461029-12.780071-18.346857-20.006659-2.964518-3.110851-5.992481-6.218632-9.052167-9.324366 1.469468-0.998747 2.978844-2.015913 4.5312-3.053546C562.564629 245.418502 582.550823 233.224786 603.601254 221.866087zM273.063119 304.335357c-2.225691-1.238201-6.499018-3.817955-12.116969-7.561209-9.450233-6.296403-18.900465-13.420661-27.631314-21.152762-35.000142-30.993898-45.433772-58.057277-26.204825-82.161255 0.300852-0.3776 0.636496-0.75827 0.953721-1.136893 27.187199-21.762653 57.552787-29.628808 91.77317-25.461905 47.482431 5.782703 100.449783 34.407648 154.260339 78.775134 21.828145 17.997909 42.267663 37.33635 60.690244 56.668651 1.362021 1.428535 2.683109 2.830465 3.979638 4.212952L276.309046 306.518069C275.30416 305.715797 274.223548 304.982086 273.063119 304.335357zM113.702622 377.019773c0-13.100366 10.464329-23.593348 23.499204-23.593348l752.196571 0c12.941753 0 23.499204 10.574846 23.499204 23.593348l0 78.08031c0 6.303566-2.427282 11.999288-6.393617 16.217357-1.722224-0.401136-3.514033-0.620124-5.359055-0.620124L125.455293 470.697315c-1.825578 0-3.599991 0.214894-5.306866 0.607844-3.988848-4.229325-6.445806-9.931187-6.445806-16.205077L113.702622 377.019773zM196.004069 869.421412c-26.069749 0-47.043433-20.874423-47.043433-46.911426L148.960637 525.602809l728.676901 0 0 296.907177c0 25.993001-20.928658 46.911426-47.043433 46.911426L196.004069 869.421412z" fill="#020202" p-id="3227"></path></svg>
                                    </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span>
                                        <svg onClick={() => {
                                            setVisible5(true)
                                            setplid(item._id)
                                        }} t="1732880280553" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16723" width="16" height="16"><path d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#3D3D3D" p-id="16724"></path></svg>
                                    </span>
                                </p>
                                <p style={{ marginLeft: '0.3rem' }}>
                                    <input value={zzplname} onKeyDown={(e) => {
                                        if (e.keyCode === 13) {
                                            addpl(item)
                                        }
                                    }} onChange={(e) => {
                                        setzzplname(e.target.value)
                                    }} type="text" style={{ border: '0px', backgroundColor: 'aliceblue', width: '95%', height: '0.7rem', borderRadius: '18px 18px' }} placeholder='来都来了,说点什么呗~' />
                                </p>
                            </div>
                        </div>
                    })
                }
            </div>
            <DotLoading style={{ display: zzloading ? 'inline-block' : 'none', fontSize: 18, marginLeft: '2.5rem', marginBottom: '1.5rem' }} />
            <span style={{ fontSize: '0.25rem' }}>加载中</span>
            {/* 评论弹出层 */}
            <Popup
                visible={visible5}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    // minHeight: '60vh',
                    width: '100vw',
                    height: '60vh',
                    overflow: 'auto'
                }}
            >
                <div>
                    <p className='plshu'>
                        <span>评论（{zzpllength}）</span>
                        <span style={{ fontWeight: 200, fontSize: 30, float: 'right', marginRight: 20 }}>×</span>
                        <span style={{ fontWeight: 200, fontSize: 30, float: 'right', marginRight: 20 }}>×</span>
                    </p>
                    {
                        zzpinglun.map(item => {
                            return <div className='yitiaopl'>
                                <div className='pltouxiang'>
                                    <img style={{ width: 30, height: 30, borderRadius: '50%' }} src={item.touxiang} alt="" />
                                </div>
                                <div className='zzwenben'>
                                    <p>
                                        <span className='zzsp1'>{item.name}</span>
                                        <span className='zzsptime1'>{moment(item.time).format('YYYY/MM/DD HH:mm')}</span>
                                    </p>
                                    <p className='zzsp2'>{item.title}</p>
                                </div>

                            </div>
                        })
                    }
                </div>
            </Popup>
            {/* 礼物弹出层 */}
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
                    {
                        zzliwulist.map((item, index) => {
                            return <div className={index === liwuindex ? 'zzliwushujus' : 'zzliwushuju'} onClick={() => {
                                zzxuanzeliwu(item, index)
                            }}>
                                <p>

                                    <img style={{ width: 30, height: 30, marginLeft: '0.5rem', marginTop: '0.2rem' }} src={item.tubiao} alt="" /><br />
                                    <span style={{ fontSize: '0.2rem', marginLeft: '0.3rem', lineHeight: '0.6rem' }}>{item.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span style={{ fontSize: '0.2rem' }}>￥{item.price}</span>

                                </p>

                            </div>

                        })

                    }
                    <button className='zzzhifu' onClick={() => {
                        zzlijizhifu()
                    }}>立即支付</button>
                </div>
            </Popup>
        </div>
    )
}